import {
    CSSProperties,
    ForwardRefRenderFunction,
    forwardRef,
    useImperativeHandle,
    useRef,
    useState
} from 'react';
import { CommonEventFunction, ScrollView } from '@tarojs/components';
import { CSSValue, TComponent } from '@material/typeing';
import Taro from '@tarojs/taro';

import $style from './index.scss';
import { clsx } from 'react-runtime-clsx';
import PullLoadStatus from './status';
import { usePullLoad } from './pull-load';
export interface VirtualViewProps extends TComponent {
    wrapStyle?: CSSProperties;
    wrapClassName?: CSSValue;
    scrollDisabled?: boolean;
    showPull?: boolean;
    onTouchStart?: (e: CommonEventFunction) => void;
    onTouchMove?: (e: CommonEventFunction) => void;
    onTouchEnd?: (e: CommonEventFunction) => void;
    onLoadHistory: (value: any) => void;
    historyApi: () => Promise<any>;
    onScroll: (e: any) => void;
    onRefresh?: any;
}

const VirtualView: ForwardRefRenderFunction<{ scrollToBottom: () => void }, VirtualViewProps> =
    function (props, ref) {
        const {
            wrapStyle,
            wrapClassName,
            children,
            className,
            style,
            onRefresh,
            onLoadHistory,
            historyApi,
            onScroll,
            onTouchStart,
            onTouchMove,
            onTouchEnd,
            showPull
        } = props;
        const [scrollTop] = useState(0);
        const scrollRef = useRef<HTMLDivElement>(null);

        const {
            status,
            handleScrollToLower,
            handleTouchStart,
            handleTouchMove,
            handleTouchEnd,
            springStyles,
            reset,
            retry,
            setExternalStatus
        } = usePullLoad({ onRefresh, historyApi, loadChange: onLoadHistory, showPull });
        const scrollToBottom = () => {
            Taro.nextTick(() => {
                scrollRef.current?.scrollTo({
                    top: 0
                });
            });
        };
        const touchStartHandle = (e: any) => {
            onTouchStart && onTouchStart(e);
            handleTouchStart?.(e);
        };
        const touchMoveHandle = (e: any) => {
            onTouchMove && onTouchMove(e);
            handleTouchMove?.(e);
        };
        const touchEndHandle = (e: any) => {
            onTouchEnd && onTouchEnd(e);
            handleTouchEnd?.();
        };
        useImperativeHandle(ref, () => ({
            scrollToBottom,
            reset,
            setExternalStatus
        }));
        const viewProps = process.env.TARO_ENV === 'h5' ? {} : { scrollTop };
        // const scrollHandle = (e) => {
        //     console.log(e);
        //     console.log(scrollRef.current.scrollHeight);
        //     onScroll && onScroll(e);
        // };
        return (
            <ScrollView
                style={style}
                scrollWithAnimation={false}
                id='K-Virual-View'
                className={clsx($style['virtual-view'], className)}
                scrollAnchoring
                scrollY={true}
                scrollX={false}
                ref={scrollRef}
                lowerThreshold={100}
                onScroll={onScroll}
                enhanced={false} // 开启小程序增强滚动
                onScrollToLower={handleScrollToLower}
                onTouchStart={touchStartHandle}
                onTouchMove={touchMoveHandle}
                onTouchEnd={touchEndHandle}
                {...viewProps}
            >
                <div
                    className={[$style.wrap, wrapClassName]}
                    style={{ ...wrapStyle }}
                >
                    {children}
                    <PullLoadStatus
                        onRefresh={onRefresh}
                        status={status}
                        pullStyle={{ ...springStyles }}
                        onRetry={retry}
                    ></PullLoadStatus>
                </div>
            </ScrollView>
        );
    };

const KVirtualView = forwardRef(VirtualView);
export default KVirtualView;
